<script setup name="AdmAdmEdit">
import { ref, shallowRef, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { ElTable, ElTableColumn, ElPagination, ElSelect, ElOption, ElDialog, ElMessage } from 'element-plus';
import { Search, Plus, Close } from '@element-plus/icons-vue';
import service from '@/utils/request';

const router = useRouter();
const admOldData = router.currentRoute.value.query;
//管理员新的信息
const admNewData = ref({
    newUserName: admOldData.name || '',
    newSchool: admOldData.department || '',
    newId: admOldData.jobId || '',
})

//表格信息
const tableData = ref([]) // 表格数据
const pageNum = shallowRef(1); // 当前页码
const pageSize = shallowRef(5); // 每页显示的条数
const totalSize = shallowRef(0); // 总条数

//添加导师相关数据
const isShowAddTeacher = shallowRef(false); // 是否显示添加导师对话框
const checkboxContent = ref([]); // 多选框的内容的数据
const selectedContent = ref([]); // 选中的数据
const checkboxSearchValue = shallowRef(''); // 搜索框的值

//搜素框相关数据
const searchValue = shallowRef(''); // 搜索框的值
const searchRef = ref(null);

onMounted(() => {
    // 添加全局点击事件监听器，处理表格操作链接
    document.addEventListener('click', handleGlobalClick);
    // 初始化数据
    getTableData('');
    getcheckboxContent('');
});

const fixedTableData = (list) => {
    if (!list) {
        return [];
    }
    return list.map((item) => ({
        name: item.username,
        jobId: item.id,
        department: item.school,
        state: item.state,
        operation: "解除关系"
    }));
}

const getTableData = (searchKey) => {
    service({
        method: "post",
        url: '/superadmin/admin/getteacher',
        headers: {
            Authorization: 'Bearer ' + localStorage.getItem('token'),   
        },
        params: {
            id: admOldData.jobId,
            condition: searchKey,
            pageNum: pageNum.value,
            pageSize: pageSize.value
        }
    }).then((res) => {
        tableData.value = fixedTableData(res.data.list || []);
        totalSize.value = res.data.total || 0;
    }).catch((error) => {
        ElMessage({
            message: '获取数据失败',
            type: 'error',
        });
        tableData.value = [];
        totalSize.value = 0;
    });
}

//编辑管理员信息后点击保存
const saveClick = () => {
    if (!admNewData.value.newUserName || !admNewData.value.newId) {
        ElMessage.warning('请填写必要的管理员信息');
        return;
    }
    
    service({
        method: "post",
        url: "/superadmin/admin/changemessage",
        headers: {
            Authorization: 'Bearer ' + localStorage.getItem('token'),
        },
        data: {
            oldId: admOldData.jobId,
            newId: admNewData.value.newId,
            newUserName: admNewData.value.newUserName,
            newSchool: admNewData.value.newSchool
        }
    }).then((res) => {
        if (res.message === '请求正常') {
            //更新数据
            admOldData.name = admNewData.value.newUserName;
            admOldData.department = admNewData.value.newSchool;
            admOldData.jobId = admNewData.value.newId;
            ElMessage({
                message: '修改成功',
                type: 'success',
            });
        }
    });
}

const searchChange = () => {
    getTableData(searchValue.value);
}

//添加导师
//获得多选框的内容
const fixedCheckboxData = (data) => {
    if (!data) {
        return [];
    }
    return data.map((item) => ({
        name: item.username,
        number: item.id,
        department: item.school,
        state: item.state,
        operation: "解除关系"
    }));
}

const getcheckboxContent = (searchKey) => {
    service({
        method: "get",
        url: "/superadmin/admin/selectteacher",
        headers: {
            Authorization: 'Bearer ' + localStorage.getItem('token'),
        },
        params: {
            condition: searchKey,
        }
    }).then((res) => {
        checkboxContent.value = fixedCheckboxData(res.data);
    });
}

//修改选中的数据
const fixedSelectedContent = (data) => {
    return data.map(item => item.number);
}

//点击添加导师
const addTeacherClick = () => {
    if (selectedContent.value.length === 0) {
        ElMessage.warning('请选择要添加的导师');
        return;
    }
    const selectedData = fixedSelectedContent(selectedContent.value);
    service({
        method: "post",
        url: "/superadmin/admin/addteacher?adminId=" + admOldData.jobId + "&teacherId=" + selectedData.join('&teacherId='),
        headers: {
            Authorization: 'Bearer ' + localStorage.getItem('token'),   
        }
    }).then((res) => {
        //console.log(res);
        if (res.message === "请求正常") {
            getTableData(searchValue.value);
            isShowAddTeacher.value = false; // 关闭对话框
            ElMessage({
                message: '添加成功',
                type: 'success',
            });
            // 清空选择
            selectedContent.value = [];
        } else {
            ElMessage({
                message: '添加失败',
                type: 'error',
            });
        }
    });
}

//添加导师的搜索框
const checkboxSearchChange = () => {
    getcheckboxContent(checkboxSearchValue.value);
}

// 移除选中的导师
const removeSelectedTeacher = (item) => {
    const index = selectedContent.value.findIndex(i => i.number === item.number);
    if (index > -1) {
        selectedContent.value.splice(index, 1);
    }
}

// 全局点击事件处理，用于优化表格操作点击
const handleGlobalClick = (event) => {
    const target = event.target;
    if (target.classList.contains('operation-link')) {
        const jobId = target.getAttribute('data-id');
        operationClick(null, { property: 'operation' }, null, { jobId });
    }
};

//点击表格解除关系
const operationClick = (row, column) => {
    if (column.property !== 'operation' || !row) {
        return;
    }
    const jobId = row?.jobId;
    if (!jobId) return;
    // 添加确认提示
    service({
        method: "post",
        url: "/superadmin/admin/relieve",
        headers: {
            Authorization: 'Bearer ' + localStorage.getItem('token'),   
        },
        params: {
            id: jobId
        }
    }).then((res) => {
        if (res.message === '请求正常') {
            getTableData(searchValue.value);
            ElMessage({
                message: '解除成功',
                type: 'success',
            });
        } else {
            ElMessage({
                message: '解除失败',
                type: 'error',
            });
        }
    });
}

//底部分页器相关事件
const handleSizeChange = (data) => {
    pageNum.value = data;
    getTableData(searchValue.value);
}

// 搜索框聚焦效果
const handleSearchFocus = () => {
    if (searchRef.value) {
        searchRef.value.classList.add('search-focused');
    }
};

const handleSearchBlur = () => {
    if (searchRef.value) {
        searchRef.value.classList.remove('search-focused');
    }
};
</script>

<template>
    <!-- 添加导师对话框 -->
    <el-dialog
    :model-value="isShowAddTeacher"
    width="60vw"
    :show-close="false"
    destroy-on-close
    custom-class="add-teacher-dialog"
    :close-on-click-modal="false"
    draggable
    >
    <template #header>
        <div class="addTeacherHeader">添加导师</div>
    </template>
    <template #default>
        <div class="addTeacherContent">
            <div class="left">
                <div class="search">
                    <div class="searchContent">
                        <input  
                        type="text" 
                        placeholder="搜索导师姓名" 
                        @change="checkboxSearchChange"
                        v-model="checkboxSearchValue"
                        class="search-input"
                        />
                        <div class="icon search-icon">
                            <el-icon><Search /></el-icon>
                        </div>                        
                    </div>
                </div>
                <div class="checkbox">
                    <el-checkbox-group v-model="selectedContent">
                        <div class="checkboxContent" v-for="item in checkboxContent" :key="item.number">
                            <el-checkbox :value="item" class="teacher-checkbox">
                                <div class="checkboxItem">
                                    <div class="name">{{ item.name }}</div>
                                    <div class="number">{{ item.number }}</div>
                                    <div class="department">{{ item.department }}</div>                            
                                </div>
                            </el-checkbox>                                     
                        </div>
                    </el-checkbox-group>                    
                </div>
            </div>
            <div class="right">
                <div class="rightHeader">已选择导师 ({{ selectedContent.length }})</div>
                <div class="rightContent">
                    <div class="rightItem" v-for="item in selectedContent" :key="item.number">
                        <span>{{ item.name }}</span>
                        <el-icon size="20" @click="removeSelectedTeacher(item)" class="icon remove-icon"><Close /></el-icon>
                    </div>
                    <div v-if="selectedContent.length === 0" class="empty-selected">
                        暂无选择的导师
                    </div>
                </div>
                <div class="rightFooter">
                    <div class="cancel" @click="isShowAddTeacher = false">取消</div>                    
                    <div class="add" @click="addTeacherClick">添加</div>
                </div>
            </div>
        </div>
    </template>
    </el-dialog>
  <div class="AdmAdmEdit">
    <div class="header">
      <span @click="router.push('/superAdministrator/adm')" class="breadcrumb-link">管理员管理</span>
      <span class="breadcrumb-separator">/</span>
      <span class="breadcrumb-current">管理员信息</span>
    </div>
    <!-- 表格 -->
    <div class="layout">
      <div class="info card">
        <div class="infoHeader">管理员信息</div>
        <div class="infoContent">
          <div class="item">
            <span class="title">姓名</span>
            <input 
            type="text" 
            :placeholder="admOldData.name" 
            v-model="admNewData.newUserName"
            class="form-input"
            >
          </div>
          <div class="item">
            <span class="title">工号</span>
            <input 
            type="text" 
            :placeholder="admOldData.jobId"
            v-model="admNewData.newId"
            class="form-input"
            >
          </div>
          <div class="item">
            <span class="title">学院</span>
            <input 
            type="text" 
            :placeholder="admOldData.department"
            v-model="admNewData.newSchool"
            class="form-input"
            >
          </div>
          <div class="save">
            <div class="saveBtn" @click="saveClick">保存</div>
          </div>
        </div>
      </div>
      <div class="dataTable card">
        <!-- 搜索框头部 -->
        <div class="tableHeader">
          <div class="left">
            <span>导师信息</span>
          </div>
          <div class="right">
            <div class="search" ref="searchRef" @focusin="handleSearchFocus" @focusout="handleSearchBlur">
              <input 
              v-model="searchValue" 
              type="text" 
              placeholder="搜索导师姓名" 
              @change.trim="searchChange"
              class="search-input"
              />
              <el-icon class="icon search-icon"><Search /></el-icon>
            </div>
            <div class="addTeacher" @click="isShowAddTeacher = true">
              <span>添加导师</span>
              <el-icon><Plus /></el-icon>
            </div>
          </div>
        </div>
        <!-- 数据表格 -->
        <div class="tableContent">
          <el-table
          :data="tableData"
          :style="{width: '100%'}"
          height="100%"
          show-overflow-tooltip
          empty-text="暂无数据"
          :header-cell-style="{color: '#000', background: '#f2f3f5'}"
          @cell-click="operationClick"
          class="teacher-table"
          >
            <el-table-column align="left" prop="name" label="姓名" width="150"></el-table-column>
            <el-table-column align="left" prop="jobId" label="工号" width="150"></el-table-column>
            <el-table-column align="left" prop="department" label="学院"></el-table-column>
            <el-table-column align="center" prop="operation" label="操作" width="100">
              <template #default="scope">
                <span class="operation-link" :data-id="scope.row.jobId">{{ scope.row.operation }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 底部分页器 -->
        <div class="tableFooter">
          <div class="left">
            <div class="total">共计: {{ totalSize }} 条</div>
          </div>
          <div class="right">
            <div class="pagination">
              <el-pagination
                  v-model="pageNum"
                  layout="prev, pager, next"
                  :total="totalSize"
                  :page-size="pageSize"
                  background
                  size="small"
                  @current-change="handleSizeChange"
              />
            </div>
            <div class="selector">
              <el-select 
              v-model="pageSize" 
              placeholder="每页条数" 
              style="width: 80px;" 
              size="small"
              @change="getTableData(searchValue)"
              >
                <el-option label="5条/页" :value="5"></el-option>
                <el-option label="10条/页" :value="10"></el-option>
                <el-option label="20条/页" :value="20"></el-option>
              </el-select>
            </div>
            <div class="jump">
              <span class="title">前往:</span>
              <input type="text" v-model="pageNum" @change="getTableData(searchValue)" class="jump-input">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">

// 变量定义
$primary-color: #4c5fbc;
$primary-hover: #3a4ba8;
$success-color: #4bc65f;
$danger-color: #f56c6c;
$warning-color: #e6a23c;
$text-primary: #303133;
$text-regular: #606266;
$text-secondary: #909399;
$border-color: #e4e7ed;
$border-light: #ebeef5;
$background-color: #f5f7fa;
$box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
$transition: all 0.3s ease;

// 公共样式
.card {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: $box-shadow;
    transition: $transition;
    &:hover {
        box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.12);
    }
}

.form-input {
    border: 1px solid $border-color;
    border-radius: 6px;
    padding: 8px 12px;
    transition: $transition;
    &:focus {
        border-color: $primary-color;
        box-shadow: 0 0 0 3px rgba(76, 95, 188, 0.1);
        outline: none;
    }
}

.search-input {
    border: none;
    outline: none;
    background-color: transparent;
    text-indent: 10px;
    width: 100%;
    height: 100%;
}

// 添加导师对话框样式
.add-teacher-dialog {
    .el-dialog__body {
        padding: 20px;
    }
}

.addTeacherHeader {
    font-size: 20px;
    font-weight: 500;
    color: $text-primary;
    margin-bottom: 10px;
}

.addTeacherContent {
    width: 100%;
    height: 60vh;
    display: flex;
    justify-content: space-between;
    .left {
        width: 50%;
        padding-right: 15px;
        .search {
            height: 40px;
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
            .searchContent {
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                border-radius: 6px;
                background-color: $background-color;
                border: 1px solid $border-color;
                transition: $transition;
                &:focus-within {
                    border-color: $primary-color;
                    background-color: #ffffff;
                    box-shadow: 0 0 0 3px rgba(76, 95, 188, 0.1);
                }
                .icon {
                    width: 40px;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;
                    color: $text-secondary;
                    transition: $transition;
                    &:hover {
                        color: $primary-color;
                    }
                }
            }
        }
        
        .checkbox {
            width: 100%;
            height: calc(100% - 60px);
            padding-right: 10px;
            overflow-y: auto;
            overflow-x: hidden;
            
            &::-webkit-scrollbar {
                width: 6px;
                height: 6px;
            }
            
            &::-webkit-scrollbar-thumb {
                background-color: #c0c4cc;
                border-radius: 3px;
                transition: $transition;
                
                &:hover {
                    background-color: #909399;
                }
            }
            
            &::-webkit-scrollbar-track {
                background-color: $background-color;
                border-radius: 3px;
            }
            
            .checkboxContent {
                width: 100%;
                height: 48px;
                display: flex;
                align-items: center;
                border-bottom: 1px solid $border-light;
                padding: 0 10px;
                transition: $transition;
                
                &:hover {
                    background-color: #f8f9fa;
                    transform: translateX(2px);
                }
                
                .teacher-checkbox {
                    width: 100%;
                    
                    .el-checkbox__label {
                        width: calc(100% - 20px);
                    }
                }
                
                .checkboxItem {
                    height: 100%;
                    display: flex;
                    gap: 20px;
                    align-items: center;
                    line-height: 1.5;
                    
                    .name {
                        font-weight: 500;
                        color: $text-primary;
                    }
                    
                    .number {
                        color: $text-regular;
                    }
                    
                    .department {
                        width: 150px;
                        height: 100%;
                        color: $text-secondary;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                }
            }
        }
    }
    
    .right {
        width: 50%;
        border-left: 1px solid $border-color;
        padding-left: 15px;
        
        .rightHeader {
            height: 36px;
            padding-left: 10px;
            line-height: 36px;
            color: $text-primary;
            font-weight: 500;
            font-size: 16px;
            border-bottom: 2px solid $primary-color;
            margin-bottom: 15px;
        }
        
        .rightContent {
            height: calc(100% - 100px);
            padding: 0 10px;
            display: flex;
            flex-wrap: wrap;
            align-content: flex-start;
            gap: 10px;
            overflow: auto;
            
            &::-webkit-scrollbar {
                width: 6px;
                height: 6px;
            }
            
            &::-webkit-scrollbar-thumb {
                background-color: #c0c4cc;
                border-radius: 3px;
                transition: $transition;
                
                &:hover {
                    background-color: #909399;
                }
            }
            
            &::-webkit-scrollbar-track {
                background-color: $background-color;
                border-radius: 3px;
            }
            
            .rightItem {
                width: calc(50% - 5px);
                padding: 10px 12px;
                border-radius: 6px;
                background-color: #f8f9fa;
                border: 1px solid $border-light;
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 14px;
                color: $text-primary;
                transition: $transition;
                animation: fadeInUp 0.3s ease;
                &:hover {
                    border-color: $primary-color;
                    background-color: #f0f2ff;
                    box-shadow: 0 2px 8px rgba(76, 95, 188, 0.15);
                }
                
                .icon {
                    transition: $transition;
                    
                    &:hover {
                        color: $danger-color;
                        transform: scale(1.2);
                    }
                }
            }
            
            .empty-selected {
                width: 100%;
                height: 80px;
                display: flex;
                align-items: center;
                justify-content: center;
                color: $text-secondary;
                font-size: 14px;
                border: 2px dashed $border-color;
                border-radius: 6px;
            }
        }
        
        .rightFooter {
            width: 100%;
            height: 40px;
            display: flex;
            justify-content: center;
            gap: 40px;
            margin-top: 15px;
            
            div {
                width: 80px;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 6px;
                color: white;
                font-size: 14px;
                font-weight: 500;
                cursor: pointer;
                transition: $transition;
                
                &:hover {
                    transform: translateY(-2px);
                    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
                }
                
                &:active {
                    transform: translateY(0);
                }
            }
            
            .add {
                background-color: $primary-color;
                
                &:hover {
                    background-color: $primary-hover;
                }
            }
            
            .cancel {
                background-color: $text-secondary;
                
                &:hover {
                    background-color: #606266;
                }
            }
        }
    }
}

// 主页面样式
.AdmAdmEdit {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: $background-color;
    
    .header {
        width: 100%;
        height: 60px;
        padding-left: 20px;
        display: flex;
        align-items: center;
        color: $text-regular;
        background-color: #ffffff;
        border-bottom: 1px solid $border-color;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        
        .breadcrumb-link {
            cursor: pointer;
            transition: $transition;
            
            &:hover {
                color: $primary-color;
                font-weight: 600;
            }
        }
        
        .breadcrumb-separator {
            margin: 0 10px;
            color: $text-secondary;
        }
        
        .breadcrumb-current {
            color: $primary-color;
            font-weight: 500;
        }
    }
    
    .layout {
        width: 100%;
        flex: 1;
        padding: 20px;
        overflow: auto;
        display: flex;
        flex-direction: column;
        gap: 20px;
        
        .info {
            width: 100%;
            padding: 20px;
            
            .infoHeader {
                width: 100%;
                height: 40px;
                font-size: 18px;
                font-weight: 600;
                color: $text-primary;
                margin-bottom: 20px;
                padding-bottom: 10px;
                border-bottom: 2px solid $primary-color;
            }
            
            .infoContent {
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                gap: 20px 0;
                
                .item {
                    width: 33%;
                    display: flex;
                    align-items: center;
                    padding-right: 20px;
                    
                    .title {
                        margin-right: 15px;
                        color: $text-regular;
                        font-weight: 500;
                        min-width: 60px;
                        &::before {
                            content: "*";
                            color: $danger-color;
                            margin-right: 4px;
                        }
                    }
                    
                    input {
                        flex: 1;
                        height: 36px;
                        border: 1px solid $border-color;
                        outline: none;
                        border-radius: 6px;
                        background-color: #ffffff;
                        color: $text-primary;
                        text-indent: 12px;
                        transition: $transition;
                        
                        &:focus {
                            border-color: $primary-color;
                            box-shadow: 0 0 0 3px rgba(76, 95, 188, 0.1);
                        }
                        
                        &::placeholder {
                            color: $text-secondary;
                        }
                    }
                }
                
                .save {
                    width: 100%;
                    margin-top: 10px;
                    display: flex;
                    justify-content: center;
                    
                    .saveBtn {
                        width: 120px;
                        height: 38px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        border-radius: 6px;
                        background-color: $primary-color;
                        color: #fff;
                        cursor: pointer;
                        font-size: 16px;
                        font-weight: 500;
                        transition: $transition;
                        
                        &:hover {
                            background-color: $primary-hover;
                            transform: translateY(-2px);
                            box-shadow: 0 4px 12px rgba(76, 95, 188, 0.3);
                        }
                        
                        &:active {
                            transform: translateY(0);
                        }
                    }
                }
            }
        }
        
        .dataTable {
            width: 100%;
            flex: 1;
            padding: 20px;
            display: flex;
            flex-direction: column;
            min-height: 400px;
            
            .tableHeader {
                width: 100%;
                padding-bottom: 15px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-bottom: 1px solid $border-light;
                margin-bottom: 15px;
                
                .left {
                    font-size: 18px;
                    font-weight: 600;
                    color: $text-primary;
                }
                
                .right {
                    display: flex;
                    align-items: center;
                    gap: 15px;
                    
                .search {
                    width: 20vw;
                    height: 4vh;
                    display: flex;
                    align-items: center;
                    border-radius: 6px;
                    background-color: #f1f2f3;
                    transition: all 0.3s ease;
                    
                    &:hover {
                    background-color: #e0e1e2;
                    }
                    
                    &:focus-within {
                    outline: 2px solid $primary-color;
                    background-color: #ffffff !important;
                    box-shadow: 0 0 0 3px rgba($primary-color, 0.1);
                    }
                    
                    input {
                    height: 100%;
                    width: 90%;
                    outline: none;
                    border: none;
                    background-color: transparent;
                    text-indent: 1em;
                    color: #8e96a0;
                    }
                    
                    .icon {
                    width: 10%;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;
                    color: #8e96a0;
                    
                    &:hover {
                        color: $primary-color;
                    }
                    }
                }
                }
                
                .addTeacher {
                    width: 110px;
                    height: 36px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 5px;
                    border-radius: 6px;
                    background-color: $primary-color;
                    color: white;
                    font-size: 14px;
                    font-weight: 500;
                    cursor: pointer;
                    transition: $transition;
                    
                    &:hover {
                        background-color: $primary-hover;
                        transform: translateY(-2px);
                        box-shadow: 0 4px 12px rgba(76, 95, 188, 0.3);
                    }
                    
                    &:active {
                        transform: translateY(0);
                    }
                }
            }
            
            .tableContent {
                flex: 1;
                overflow: hidden;
                margin: 10px 0;
                border-radius: 6px;
                border: 1px solid $border-color;
                
                .teacher-table {
                    height: 100%;
                    
                    :deep(.el-table__row) {
                        transition: $transition;
                        
                        &:hover {
                            background-color: #f5f7fa;
                        }
                    }
                    
                    :deep(.el-table__header th) {
                        background-color: #fafafa !important;
                        font-weight: 600;
                        color: $text-primary;
                        border-bottom: 1px solid $border-light;
                    }
                    
                    :deep(.el-table__body td) {
                        padding: 12px 0;
                        border-bottom: 1px solid $border-light;
                    }
                    
                    .operation-link {
                        color: $primary-color;
                        cursor: pointer;
                        transition: $transition;
                        padding: 4px 8px;
                        border-radius: 4px;
                        
                        &:hover {
                            background-color: rgba(76, 95, 188, 0.1);
                            color: $primary-hover;
                            text-decoration: underline;
                        }
                    }
                }
            }
            
            .tableFooter {
                width: 100%;
                padding-top: 15px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                border-top: 1px solid $border-light;
                
                .left {
                    .total {
                        font-size: 14px;
                        color: $text-secondary;
                    }
                }
                
                .right {
                    display: flex;
                    align-items: center;
                    gap: 15px;
                    
                    .pagination {
                        margin-right: 0;
                    }
                    
                    .selector {
                        margin-right: 0;
                    }
                    
                    .jump {
                        display: flex;
                        align-items: center;
                        gap: 8px;
                        
                        .title {
                            font-size: 14px;
                            color: $text-regular;
                        }
                        
                        .jump-input {
                            width: 40px;
                            height: 28px;
                            text-align: center;
                            line-height: 28px;
                            border: 1px solid $border-color;
                            outline: none;
                            border-radius: 4px;
                            background-color: #ffffff;
                            color: $text-primary;
                            transition: $transition;
                            
                            &:focus {
                                border-color: $primary-color;
                                box-shadow: 0 0 0 2px rgba(76, 95, 188, 0.1);
                            }
                        }
                    }
                }
            }
        }
    }
}

// 动画效果
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

// 响应式设计
@media (max-width: 1200px) {
    .AdmAdmEdit {
        .layout {
            .info {
                .infoContent {
                    .item {
                        width: 50%;
                    }
                }
            }
        }
    }
    
    .addTeacherContent {
        .left,
        .right {
            width: 100%;
        }
        
        .right {
            border-left: none;
            border-top: 1px solid $border-color;
            margin-top: 20px;
            padding-left: 0;
        }
    }
}

@media (max-width: 768px) {
    .AdmAdmEdit {
        .header {
            padding-left: 15px;
            font-size: 14px;
        }
        
        .layout {
            padding: 15px;
            
            .info {
                padding: 15px;
                
                .infoContent {
                    .item {
                        width: 100%;
                        padding-right: 0;
                    }
                }
            }
            
            .dataTable {
                padding: 15px;
                
                .tableHeader {
                    flex-direction: column;
                    align-items: stretch;
                    gap: 15px;
                    
                    .left {
                        text-align: center;
                    }
                    
                    .right {
                        justify-content: center;
                        flex-wrap: wrap;
                    }
                    
                    .search {
                        width: 100%;
                    }
                }
                
                .tableFooter {
                    flex-direction: column;
                    gap: 15px;
                    align-items: stretch;
                    
                    .right {
                        justify-content: center;
                        flex-wrap: wrap;
                    }
                }
            }
        }
    }
    
    .add-teacher-dialog {
        width: 90vw !important;
    }
    
    .addTeacherContent {
        height: 70vh;
    }
}
</style>